<template>
	<view>
		<cu-custom bgColor="bg-white">
			
		</cu-custom>
			<view style="background-color: #FFFFFF;">
				<view class="flex align-end">
					<view class="flex-treble padding-lr-sm margin-xs radius">
						<view class="text-bold">山东财经大学圣井店<text class="cuIcon-right"></text></view>
						<view class="text-gray"><text class="cuIcon-locationfill"></text>距离您112m</view>
					</view>
					<view class="flex-sub padding-lr-sm padding-top-sm margin-xs radius">
						<s-switch @switchValue="getSwitchValue" :defaultValue="1" :switchList="arr"></s-switch>
					</view>
				</view>
			
				<view class="flex align-end">
					<view class="flex-treble padding-lr-sm padding-bottom-sm margin-xs radius text-cut">
						<view class="padding-top-xs text-gray text-cut">门店详细信息</view>
					</view>
					<view class="flex-sub padding-lr-sm padding-bottom-sm margin-xs radius text-center">
						<view class="padding-top-xs text-gray ">点击查看<text class="cuIcon-right"></text></view>
					</view>
				</view>
			</view>
			
		
		
		<view class="VerticalBox" :style="[{top:CustomBar + 'px'}]">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 220upx)">
				<view class="cu-item" style="height: 120rpx;" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
				 :data-id="index">
					<view class="" style="position: relative;">
						<image :src="item.iconimg" mode="scaleToFill" style="width:60rpx;height:60rpx;"></image>
						<view class="" style="position: absolute;top: 50rpx;width: 100%;">
							<view class="" style="text-align: center;">
								{{item.name}}
							</view>	
							
						</view>
					</view>	
				</view>
			</scroll-view>
			
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 220upx)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				 
				<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index" data-target="bottomModal" @tap="showModal">
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-for="(food,index) in foodList" :key="index" style="padding: 100rpx 0;">
							<view class="cu-avatar lg" :style="{ 'background-image': 'url('+food.img+')' }"></view>
							<view class="content">
								
								<view class="" style="font-weight: 600;">{{food.title1}}</view>
								<view class="text-gray text-sm flex sl" >
									<text>
										{{food.title2}}
									</text> 
								</view>
								<view class="grid col-2 ">
									<view class="text-left" style="margin-top: 10rpx;">
										￥{{food.price}}
									</view> 
									<view class="text-right padding-right">
										<button @tap="addSub(index,2)" v-if="food.num > 0" class="cu-btn sm cuIcon lines-gray round padding-sm" style="font-size: 40upx;">
											<text class="cuIcon-move text-lg text-bold"></text>
										</button>
										<text v-if="food.num > 0" class="padding-lr-xs" style="font-weight: 600;">{{food.num}}</text>
									</view> 
								</view>
							</view>
						</view>

					</view>
				</view>
			</scroll-view>
		</view>
		
		
		<view class="cu-modal bottom-modal" style="position: fixed;bottom: 0rpx;" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view style="text-align: right;margin-right: 30rpx;margin-top: 10rpx;background-color: #fff;">
					<text @tap="hideModal" class="cuIcon-close"></text>
				</view>	
				<view class="padding-xl" style="background-color: #fff;padding-bottom: 300rpx;">
					<image src="../../static/nc/3a.jpg" mode="aspectFill" style="width: 200rpx;height: 200rpx;"></image>
					<view class="flex justify-between align-center">
						<view class="" style="font-size: 32rpx;font-weight: 600;">
							鸭屎香柠檬茶
						</view>
						<view class="">
							<view class="cuIcon-like">
								
							</view>	
							<view class="">
								收藏口味
							</view>	
						</view>
					</view>	
					<view class="" style="font-size: 24rpx;text-align: left;margin-top: 20rpx;">
						介绍：我是鸭屎香柠檬茶我是鸭屎香柠檬茶我是鸭屎香柠檬茶我是鸭屎香柠檬茶我是鸭屎香柠檬茶我是鸭屎香柠檬茶我是鸭屎香柠檬茶
					</view>	
					<view class="" style="text-align: left;">
						<view class="">
							杯型
							<view class="xuanzhong" >
								<text class="cuIcon-favorfill"> </text>
								大杯
							</view>	
						</view>	
						<view class="" style="margin-top: 20rpx;margin-bottom: 20rpx;">
							温度
							<view class="flex">
								<view class="xuanzhong">
									<text class="cuIcon-favorfill"> </text>
									正常冰
								</view>	
								<view class="noxuanzhong" style="margin-left: 20rpx;">
									少冰
								</view>	
							</view>	
							
						</view>	
						<view class="">
							糖度
							<view class="flex">
								<view class="xuanzhong">
									<text class="cuIcon-favorfill"> </text>
									少
								</view>	
								<view class="noxuanzhong" style="margin-left: 20rpx;">
									多
								</view>	
							</view>
						</view>	
					</view>	
					
				</view>
				<view class="" style="background: #fff;font-weight: 600;height: 200rpx;position: absolute;bottom: 0;width: 100%;box-shadow: 0px 5px 0px inset #eeeeee;">
					<view class="flex justify-between" style="padding: 0 30rpx;margin-top: 20rpx;" >
						<view class="text-left">
							￥16
							<view class="" style="font-size: 24rpx;color: #999999;">
								大杯,正常冰,正常糖
							</view>	
						</view>	
						<view class="text-right padding-right">
							<button  class="cu-btn sm cuIcon lines-gray round padding-sm" style="font-size: 40upx;">
								<text class="cuIcon-move text-lg text-bold"></text>
							</button>
							<text  class="padding-lr-xs" style="font-weight: 600;">1</text>
							<button class="cu-btn sm cuIcon bg-green padding-sm" style="font-size: 40upx;">
								<text class="cuIcon-add text-lg text-bold"></text>
							</button>
						</view>
					</view>	
					<view class="btn" @tap="tishi">
						加入购物车
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import SSwitch from '@/components/switch.vue'
	export default {
		components: {
		        SSwitch
		    },
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				arr: [
						{
							key: 1,
							value: '外卖'
						},
						{
							key: 2,
							value: '自取'
						}
					],
				foodList:[
					    {
							title1: '鲜草莓桃桃',
							title2: '鲜甜桃肉x红颜草莓x茉莉绿茶 新鲜红颜草莓手工捣制，融入香甜桃子，搭配清新优雅的茉莉花香，满满果肉，清爽回甘！',
							img: '../../static/goods/001001.png',
							price: 30,
							num:0
				        },
						{
							title1: '杨枝甘露（中杯）',
							title2: '鲜甜桃肉x红颜草莓x茉莉绿茶 新鲜红颜草莓手工捣制，融入香甜桃子，搭配清新优雅的茉莉花香，满满果肉，清爽回甘！',
							img: '../../static/goods/001002.png',
							price: 55,
							num:0
						},
						{
							title1: '霸气鲜草莓',
							title2: '鲜甜桃肉x红颜草莓x茉莉绿茶 新鲜红颜草莓手工捣制，融入香甜桃子，搭配清新优雅的茉莉花香，满满果肉，清爽回甘！',
							img: '../../static/goods/001003.png',
							price: 20,
							num:0
						},
						{
							title1: '葡萄多肉酪酪',
							title2: '鲜甜桃肉x红颜草莓x茉莉绿茶 新鲜红颜草莓手工捣制，融入香甜桃子，搭配清新优雅的茉莉花香，满满果肉，清爽回甘！',
							img: '../../static/goods/001004.png',
							price: 19,
							num:0
						},
						{
							title1: '鸭屎香柠檬茶',
							title2: '鲜甜桃肉x红颜草莓x茉莉绿茶 新鲜红颜草莓手工捣制，融入香甜桃子，搭配清新优雅的茉莉花香，满满果肉，清爽回甘！',
							img: '../../static/goods/001005.png',
							price: 35,
							num:0
						}
				],
				totalPrice:0,
				totalNum:0,
				modalName: 0,
				category:[
					{
						id:0,
						name:'阿水当季必点',
						iconimg:"../../static/menu/order_menu_1.png"
					},
					{
						id:1,
						name:'鲜果·茶',
						iconimg:"../../static/menu/order_menu_2.png"
					},
					{
						id:2,
						name:'超人气奶茶',
						iconimg:"../../static/menu/order_menu_3.png"
					},
					{
						id:3,
						name:'现磨咖啡',
						iconimg:"../../static/menu/order_menu_4.png"
					},
					{
						id:4,
						name:'天然海风·椰',
						iconimg:"../../static/menu/order_menu_5.png"
					},
					{
						id:5,
						name:'鲜沏茶',
						iconimg:"../../static/menu/order_menu_6.png"
					}
				]
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let list = [{}];
			for (let i = 0; i < this.category.length; i++) {
				list[i] = {};
				list[i].name = this.category[i].name;
				list[i].id = this.category[i].id;
				list[i].iconimg = this.category[i].iconimg
			}
			this.list = list;
			this.listCur = list[0];
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			tishi(){
				uni.showModal({
					title: '提示',
					content: '加入成功去付款',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.switchTab({
								url:'../takeorder/takeorder'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			
			
			getSwitchValue (e) {
				console.log(e.key)
				uni.showToast({
					icon: 'none',
					title:'已切换到' + (e.key == 1?"外卖餐品":"自取餐品")
				})
			},
			cat(){
				var arr_sel = [];
				for (var i = 0; i < this.foodList.length; i++) {
					if(this.foodList[i]["num"] > 0){
						arr_sel.push(this.foodList[i]);
					}
				}
				console.log(JSON.stringify(arr_sel))
				uni.navigateTo({
					url: '../order/order_confirm?foods='+ encodeURIComponent(JSON.stringify(arr_sel))
				})
			},
			hideModal(){
				this.modalName = 0;
			},
			addSub:function(index, type){
				console.log(index)
				var food = this.foodList[index];
				//加
				if(type == 1){
					food["num"] = food["num"] + 1;
					this.totalNum ++;
					this.totalPrice += food["price"];
				}else{
					food["num"] = food["num"] - 1;
					this.totalNum --;
					this.totalPrice -= food["price"];
				}
				if(this.totalNum == 0){
					this.modalName = 0;
				}
				
			},
			clear(){
				this.totalNum = 0;
				this.totalPrice = 0;
				for (var i = 0; i < this.foodList.length; i++) {
					this.foodList[i]["num"] = 0;
				}
				this.modalName = 0;
			},
			openBag(){
				this.modalName = this.modalName == 1?0:1;
			},
			changeShop(){
				uni.navigateTo({
					url:"../index/index"
				})
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
		},
	}
</script>

<style>
	/*#ifdef H5 */
	.cu-bar.foot{bottom: 50px;}
	.bottom-modal{bottom: 100px;}
	/*#endif */
	/*#ifndef H5 */
	.bottom-modal{bottom: 50px;}
	/*#endif */
	
	.cu-modal {
		transition: auto;
	}
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f1f1f1;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #fff;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: #287a00;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #fff;
		flex: 1;
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100%  - 120upx);
	}
	.cu-list.menu-avatar>.cu-item{
		height: 100px;
	}
	
	.xuanzhong{
		background: #287a00;
		width: 120rpx;
		text-align: center;
		border-radius: 5rpx;
		color: #fff;
	}
	
	.noxuanzhong{
		background: #eeeeee;
		width: 120rpx;
		text-align: center;
		border-radius: 5rpx;
		color: #333333;
	}
	
		
	.btn{
		margin: 0 30rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #999999;
		color: #fff;
		margin-top: 30rpx;
	}
	
	.sl {
		width: 330rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>
 